<template>
  <div class="xhl-topbar-search">
    <div class="xhl-search-multiple" style="width: 500px; margin-bottom: 15px; display: flex; align-items: center;">
  <div class="el-select el-select--small" style="width: 150px; margin-right: 10px;">
    <select class="el-input__inner" v-model="selectedOption">
      <option disabled value="">请选择</option>
      <option value="inventory_name">盘点名称</option>
    </select>
    <span class="el-input__suffix">
      <span class="el-input__suffix-inner">
        <i class="el-select__caret el-input__icon el-icon-arrow-up"></i>
      </span>
    </span>
  </div>
  <input type="text" v-model="searchText" autocomplete="off" placeholder="搜索内容" class="el-input__inner" style="flex: 1;">
  <button class="reset" @click="handleReset" style="margin-left: 10px;">重置</button>
  <i title="点击搜索" class="search-icon el-icon-search" @click="handleSearch" style="margin-left: 10px;"></i>
</div>

<button class="add-function" @click="handleAddFunction">新增</button>
    <el-table :data="tableData" style="width: 100%;" @row-click="handleRowClick">
      <el-table-column prop="date" label="状态" sortable></el-table-column>
      <el-table-column prop="name" label="盘点名称" sortable></el-table-column>
      <el-table-column prop="address" label="耗材分类"></el-table-column>
      <el-table-column prop="date" label="耗材仓库" sortable></el-table-column>
      <el-table-column prop="name" label="盘盈耗材自动新增入库" sortable></el-table-column>
      <el-table-column prop="address" label="派发处未盘、盘亏耗材自动盘亏处理理人"></el-table-column>
      <el-table-column prop="date" label="创建创建时间人" sortable></el-table-column>
      <el-table-column prop="address" label="操作"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems"
      style="margin-top: 20px;">
    </el-pagination>
   
     <lncrease v-if="lncreaseComponent" ref="lncrease"></lncrease>
  </div>
</template>

<script>
import lncrease from './lncrease.vue'
export default {
  data() {
    return {
      components: {
        lncrease
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      searchText: '',
      selectedOption: 'inventory_name',
      lncreaseComponent: null // 用于控制子组件的显示
    };
  },
  methods: {
    handleSearch() {
      this.loadTableData();
    },
    handleReset() {
      this.searchText = '';
      this.currentPage = 1;
      this.pageSize = 10;
      this.loadTableData();
      
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.loadTableData();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.loadTableData();
    },
    handleRowClick(row) {
      console.log('Row clicked:', row);
    },
    handleAddFunction(){
      if (!this.lncreaseComponent) {
        // 创建子组件实例并显示
        this.lncreaseComponent = true;
      }
      // 如果子组件已经存在，则直接显示
      this.$refs.lncrease.show();
    
    },
    async loadTableData() {
      try {
        const response = await fetch('/api/search', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            searchText: this.searchText,
            selectedOption: this.selectedOption,
            currentPage: this.currentPage,
            pageSize: this.pageSize
          })
        });

        const data = await response.json();
        this.tableData = data.items;
        this.totalItems = data.totalItems;
      } catch (error) {
        console.error('Error loading table data:', error);
      }
    }
  },
  mounted() {
    this.loadTableData();
  }
};
</script>

<style scoped>


.xhl-search-multiple {
  background-color: #fff;

  border-radius: 8px;
  padding: 15px;
}

.el-input__inner {
  border: 2px solid #495057;
  border-radius: 6px;
}

.search-icon {
  color: #495057;
  cursor: pointer;
  font-size: 20px;
}
.el-select--small{
  margin-top: 15px;
}
.reset {
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
}

.reset:hover {
  background-color: #5a6268;
}
.add-function {
  background-color: blue;
  color: #fff; 
  border: none; 
  border-radius: 5px; 
  padding: 10px 20px; 
  cursor: pointer; 
  font-size: 16px;
  margin-top: 15px; 
}

</style>